import React from 'react'
import ApiService from '../services/api-service'

class GiftResult extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      show_error: false,
      winner_list: [],
      user_list: []
    }
  }
  componentDidMount() {
    this.getResultData()
  }

  getResultData() {
    this.setState({loading: true})
    ApiService.getPrizeResult(this.props.gift.pool.id, this.props.userToken).then(res => {
      if (!res.status) {
        this.setState({loading: false, show_error: true})
      } else {
        // res.data.records = Array.from(new Array(20).keys()).map(e => {
        //   return {
        //     ...res.data.records[0]
        //   }
        // })
        this.initList(res.data)
      }
    }).catch(error => {
      this.setState({loading: false, show_error: true})
    })
  }
  initList(data) {
    let records = data.records || []
    let winner_list = records.filter(_ => _.state === 2)
    let user_list = records.concat([])
    this.setState({
      winner_list, user_list, loading: false
    })
  }
  clickClose() {
    this.props.onCloseGift && typeof this.props.onCloseGift === 'function' && this.props.onCloseGift()
  }
  renderError() {
    if (this.state.loading) {
      return (
        <div className="mask-loading">
          <img className="loading-icon" src={require('../images/indicator_verybig.gif')} alt=""/>
        </div>
      )
    }
    if (this.state.show_error) {
      return (
        <div className="mask-error">
          <p className="error-tip">
            {this.props.language_data ? this.props.language_data.pc_stu_gift_tip_result_error : '获取中奖结果失败'}</p>
          <div href="javascript:void(0);" className="error-btn">
            {this.props.language_data ? this.props.language_data.pc_stu_app_button_retry : '点击重试'}</div>
        </div>
      )
    }
  }
  renderUserList() {
    let list = this.state.user_list.map((item, index) => {
      return (
        <div key={index} className="user-item">
          <div className="user-head" style={{backgroundImage: `url(${item.user.headimgurl})`}}/>
          <div className="user-name">{item.user.nickname}</div>
        </div>
      )
    })
    if (list.length <= 0) {
      return <div className="no-list">
        {this.props.language_data ? this.props.language_data.pc_stu_gift_tip_no_join_error : '无参与人员'}</div>
    }
    return list
  }
  renderWinnerList() {
    let list = this.state.winner_list.map((item, index) => {
      return (
        <div key={index} className="winner-item">
          <div className="winner-head" style={{backgroundImage: `url(${item.user.headimgurl})`}}>
            <img className="winner-flag" src={require('../images/gift_winner_icon.png')} alt=""/>
          </div>
          <div className="winner-name">{item.user.nickname}</div>
          <div className="gift-name">{item.prize.name}</div>
        </div>
      )
    })
    if (list.length <= 0) {
      return <div className="no-list">
        {this.props.language_data ? this.props.language_data.pc_stu_gift_tip_no_prize_error : '无中奖人员'}</div>
    }
    return list
  }
  renderContent() {
    const {loading, show_error} = this.state
    return !loading && !show_error ? (
      <div className="mask-result-out">
        <div className="mask-result mask-content">
          <div className="winner-module">
            <div className="module-title">{this.props.language_data ? this.props.language_data.pc_stu_gift_tip_prize_user_title_prefix : '中奖者'}<span>（{this.state.winner_list.length}{this.props.language_data ? this.props.language_data.pc_stu_gift_tip_prize_user_title_suffix : '人'}）</span></div>
            <div className="module-list">
              {this.renderWinnerList()}
            </div>
          </div>
          <div className="winner-module no-border">
            <div className="module-title">{this.props.language_data ? this.props.language_data.pc_stu_gift_tip_join_user_title_prefix : '参与用户'}<span>（{this.state.user_list.length}{this.props.language_data ? this.props.language_data.pc_stu_gift_tip_prize_user_title_suffix : '人'}）</span></div>
            <div className="user-module-list">
              {this.renderUserList()}
            </div>
          </div>
          <div className="_blank"/>
          <div className="rule-con">
            <div className="title">{this.props.language_data ? this.props.language_data.pc_stu_gift_title_gift_rule : '抽奖规则'}</div>
            <div className="tip">{this.props.language_data ? this.props.language_data.pc_stu_gift_text_git_rule_text : '用户在规定时间内点击参与，倒计时结束后系统随机出奖'}</div>
          </div>
        </div>
      </div>
    ) : null
  }
  render() {
    return (
      <div className={`gift-mask ${this.props.platform || 'pc'}`}>
        <div className="mask-inner">
          <img onClick={() => this.clickClose()} src={require('../images/link_close_icon.png')} className="mask-close" alt=""/>
          <div className="mask-title">
            {this.props.language_data ? this.props.language_data.pc_stu_gift_title_result_modal : '中奖结果'}
          </div>
          {this.renderContent()}
          {this.renderError()}

        </div>
      </div>
    )
  }
}

export default GiftResult


